<template>
  <div>
    <Form
      oneitem="策略搜索："
      :select-show="false"
      :total-count="totalCount"
      :total-page="totalPage"
      :search-list="policyList"
      :page-index="pageIndex"
      @searchResultFn="searchResultFn"
      @newCreateFn="newCreateFn"
    >
      <template #tableForm>
        <el-ta=ble-column label="序号" width="80" type="index" :index="indexMethod" />
        <el-table-column prop="policyName" label="策略名称" />
        <el-table-column prop="discount" label="策略方案" />
        <el-table-column prop="createTime" label="创建日期" width="160" />
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="infoFn(scope.row)">查看详情</el-button>
            <el-button type="text" @click="edit(scope.row)">修改</el-button>
            <el-button type="text" style="color:red" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </Form>
    <el-dialog :title="policyForm.policyId?'修改策略':'新增策略'" :visible.sync="policyFormVisible" width="630px" @closed="closeDialog">
      <el-form ref="policyForm" :model="policyForm" status-icon label-width="140px" :rules="policyFormRules">
        <el-form-item label="策略名称：" prop="policyName">
          <el-input v-model="policyForm.policyName" type="text" placeholder="请输入" maxlength="15" show-word-limit />
        </el-form-item>
        <el-form-item label="策略方案：" prop="discount">
          <el-input-number v-model="policyForm.discount" controls-position="right" :min="1" :max="100" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button id="buttom2" @click="policyFormVisible=false">取 消</el-button>
        <el-button id="buttom1" type="primary" @click="creatFn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 详情 -->
    <!-- <info-dialog :info-visible="infoVisible" :info="info" /> -->
    <el-dialog title="策略详情" :visible.sync="infoVisible" width="630px">
      <el-form :model="info">
        <el-form-item label="策略名称：">{{ info.policyName }}</el-form-item>
        <el-form-item label="策略方案：">
          <el-table :data="gridData" style="width:396px">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column property="nodeName" label="点位名称" />
            <el-table-column property="innerCode" label="设备编号" />
          </el-table>
        </el-form-item>
        <el-form-item v-if="infoTotalPage>1">
          <div class="page">
            <div class="pageShowLeft">
              共{{ infoTotalCount }}条记录 第 {{ infoPageIndex }}/{{ infoTotalPage }} 页
            </div>
            <div class="pageShowRight">
              <el-pagination
                background
                layout="prev, next"
                :total="infoTotalPage*10"
                prev-text="上一页"
                next-text="下一页"
                @current-change="currentChange"
              />
            </div>
          </div>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import Form from '@/components/form/index.vue'
import { policySearch, addPolicy, editPolicy, delPolicy, policyVmList } from '@/api'
export default {
  components: { Form },
  data() {
    return {
      policyList: [],
      pageIndex: 1,
      totalPage: null,
      totalCount: null,
      policyForm: {
        policyName: null,
        discount: undefined
      },
      policyFormRules: {
        policyName: [{ required: true, message: '请输入' }],
        discount: [{ required: true, message: '请输入' }]
      },
      policyFormVisible: false,
      infoVisible: false,
      info: {},
      gridData: [],
      infoTotalCount: null,
      infoPageIndex: 1,
      infoTotalPage: null
    }
  },
  async created() {
    await this.policyFn(this.pageIndex)
  },
  methods: {
    async policyFn(pageIndex, policyName) {
      const res = await policySearch({
        pageIndex,
        pageSize: 10,
        policyName
      })
      res.data.currentPageRecords.forEach(item => {
        item.createTime = item.createTime.replace(/-/g, '.').replace('T', ' ')
      })
      this.policyList = res.data.currentPageRecords
      this.totalPage = res.data.totalPage
      this.totalCount = res.data.totalCount
      return res.data
    },
    indexMethod(index) {
      return this.pageIndex === 1 ? index + 1 : Number(`${this.pageIndex - 1}${index}`) + 1
    },
    async searchResultFn(val) {
      await this.policyFn(1, val.taskCode)
    },
    // 新建
    newCreateFn() {
      this.policyFormVisible = true
    },
    closeDialog() {
      this.$refs.policyForm.resetFields()
    },
    // 确新兴建
    async creatFn() {
      this.$refs.policyForm.validate(async(valid) => {
        if (!valid) return
        if (this.policyForm.policyId) {
          const id = this.policyForm.policyId
          this.policyForm = {
            policyName: this.policyForm.policyName,
            discount: this.policyForm.policyName.discount
          }
          await editPolicy(id, this.policyForm).then(() => {
            this.$message.success('修改成功')
          }).catch(res => {
            this.$message.warning(res.response.data)
          })
        } else {
          await addPolicy(this.policyForm).then(() => {
            this.$message.success('新建成功')
          }).catch(res => {
            this.$message.warning(res.response.data)
          })
        }
      })
      await this.policyFn(this.pageIndex)
      this.policyFormVisible = false
    },
    // 修改
    edit(row) {
      this.policyForm = row
      this.policyFormVisible = true
    },
    // 删除
    del(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPolicy(row.policyId)
        await this.policyFn(this.pageIndex)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async infoFn(row) {
      this.info = row
      this.infoVisible = true
      this.infoFnApi(this.infoPageIndex)
    },
    // info接口
    async infoFnApi(pageIndex) {
      const res = await policyVmList(this.info.policyId, { pageIndex, pageSize: 10 })
      this.gridData = res.data.currentPageRecords
      console.log(res)
      this.infoTotalCount = res.data.totalCount
      this.infoTotalPage = res.data.totalPage
    },
    currentChange(page) {
      this.infoPageIndex = page
      this.infoFnApi(this.infoPageIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  justify-content:right;
  align-items: center;
  background: #fff;

  .pageShowLeft {
    line-height: 28px;
    height: 28px;
    font-size: 16px;
    color: #dbdfe5;
  }
}
</style>
